<template>
	<view>
		<view class="topWarp">
			<!-- <view class="title">
				我的周报
			</view> -->
			<view class="content">
				<image src="https://longyugou.top:8008/icon/ill/play/ele.png" mode="" class="imgs"></image>
			</view>
			<view class="circle">
				<view class="itm">
					<view class="circleTitle">
						个人计划/个
					</view>
					<view class="circleCount">
						{{ person }}
					</view>
				</view>
				<view class="itm" id="active">
					<view class="circleTitle">
						积分日均值
					</view>
					<view class="circleCount">
						{{ myIntrgral }}
					</view>
				</view>
				<view class="itm">
					<view class="circleTitle">
						团队计划/个
					</view>
					<view class="circleCount">
						{{ team }}
					</view>
				</view>
			</view>
			
			<view class="content">
				<!-- <view class="stitle">
					成长数据
				</view> -->
				<view class="echart">
					<view class="item">
						<p>本周新增计划</p>
						<h2>{{ this.todayClick }}</h2>
					</view>
					<view class="item">
						<p>本周积分增长</p>
						<h2>{{ this.weeklyClick }}</h2>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<!-- <view class="text-area">
			<view class="left">
				<h3>我的积分</h3>
				<span>{{ myIntrgral }}</span>
			</view>
			<view class="right">
				<button type="primary" size="mini" style="background-color: #fff;color: #7EC2ED;font-weight: 1000;" @tap="goExChange">兑换</button>
			</view>
		</view>
		<view class="text-area">
			<view class="left">
				<h3>我的计划</h3>
				<span>{{ allPlan }}</span>
			</view>
			<view class="right">
				<p>详情 ></p>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { selectAllPlan, selectTodayClock, selectWeeklyClock, UpdateIntegral } from "@/api/index.js"
	export default {
		data() {
			return {
				todayClick: 0,
				weeklyClick: 0,
				team: 0,
				allPlan: 0,
				ranking: 0,
				person: 0,
				myIntrgral: 0
			}
		},
		onLoad() {
			console.log(this.$store.state.weeklyData);
			let res = this.$store.state.weeklyData
			this.weeklyClick = this.increaseData(res)
			this.todayClick = res.length
			this.unit(res)
		},
		methods: {
			goExChange(){
				uni.navigateTo({
					url: "/pages/exchange/exchange"
				})
			},
			async unit(res){
				this.person = res.filter(item => item.level === 1).length
				this.team = res.filter(item => item.level === 2).length
				if(this.todayClick === 0) {
					this.myIntrgral = 0
				} else {
					this.myIntrgral = (this.weeklyClick/this.todayClick).toFixed(2)
				}
				
			},
			increaseData(data){
				let temp = 0;
				data.forEach(item => {
					temp += item.integral
				})
				return temp
			}
		}
	}
</script>

<style scoped>
	page {
		background: linear-gradient(#2980B9,#6DD5FA,aliceblue);
	}
.topWarp {
	/* height: 500rpx; */
	/* background: linear-gradient(#2980B9,#6DD5FA,aliceblue); */
	border-radius: 0 0 30% 30%;
	padding: 20rpx;
	color: #fff;
	margin-bottom: 200rpx;
	/* padding-top: 100rpx; */
}
.title {
	text-align: center;
	padding: 20rpx 0;
	color: #fff;
	font-size: 1.2rem;
	margin-top: var(--window-top);
}
.content {
	margin: 50rpx 0;
	/* color: #2980B9; */
}
.echart, .circle {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
}
.circle {
	padding: 10rpx;
	color: #115385;
}
.itm {
	width: 30%;
	background-color: #fff;
	text-align: center;
	padding: 30rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 20rpx;
}
.circleCount {
	width: 150rpx;
	hright: 150rpx;
	border-radius: 50%;
	border: 1px solid cadetblue;
	text-align: center;
	line-height: 150rpx;
	margin-top: 20rpx;
}
.item {
	width: 40%;
	padding: 20rpx;
	background: #2980B9;
	color: #fff;
	border-radius: 20rpx;
}
	.text-area {
		width: 90%;
		padding: 20rpx;
		/* background: linear-gradient(to right, #FF8008,#FFC837); */
		background: linear-gradient(to right, #115385,#7EC2ED);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
		margin-left: calc(5% - 20rpx);
	}
	.left, .right {
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #fff;
	}
	#active {
		margin-top: -50rpx;
	}
	.imgs {
		width: 300rpx;
		height: 300rpx;
		/* border-radius: 50%; */
		margin-left: 50%;
		transform: translateX(-50%);
	}
</style>
